import React, {
  Component,
  createRef,
  createContext,
  useRef,
  useState,
} from "react";
import PropType from 'prop-types'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"

import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls'; //第一人称控制器

import gsap from 'gsap'; //动画库
import Stats from 'stats.js'; //性能监控
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'; // FBX 模型加载器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; //模型加载器
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; //模型解压缩
const width =  window.innerWidth ;
const height = window.innerHeight
const clock = new THREE.Clock(); 
const  stats = new Stats(); 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45,width / height, 1, 12000 );
camera.position.set(30,1, 0) // 设置相机位置

// camera.lookAt(new THREE.Vector3(0, 0, 0))
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(width, height );

const loader = new GLTFLoader(); //gltf模型加载器
 
const dracoLoader = new DRACOLoader(); //模型解压缩


const controls = new FirstPersonControls( camera, renderer.domElement );

const ReactDemo=()=>{


  animate();
 

    const container = document.createElement( 'div' );
    document.body.appendChild( container );

    
    // camera.position.set( 2, 18, 28 );


    // controls.verticalMax =Math.PI / 2
    // controls.verticalMin =Math.PI / 2
    
    controls.mouseDragOn=false;
    controls.lookVertical=false;
    
    controls.heightMax =0.5
    
    controls.movementSpeed =0.5;
    controls.lookSpeed = 0.1;

    const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
    hemiLight.position.set( 0, 1, 0 );
    scene.add( hemiLight );

    const dirLight = new THREE.DirectionalLight( 0xffffff );
    dirLight.position.set( 0, 1, 0 );
    scene.add( dirLight );

   

    // stats
    
    container.appendChild( stats.dom );

    // model   

    dracoLoader.setDecoderPath('./draco');
    loader.setDRACOLoader(dracoLoader);
    loader.load( '3D/B工厂.glb' , function ( object ) {

      scene.add( object.scene );

    } );


    container.appendChild( renderer.domElement );

 
    // controls.target.set( 0, 12, 0 );
    // 

    window.addEventListener( 'resize', onWindowResize );


  function onWindowResize() {

    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    controls.handleResize();
    renderer.setSize( width, height );

  }

  //

  function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );
    controls.update(clock.getDelta() );
    stats.update();

  }
  return (<>
   
    
    <div id="id"></div>
  </>)
}

export default ReactDemo;
